<template>
  <div class="dashboard">
    <div class="container">
      <div class="top">
        <!-- 左侧内容 -->
        <div class="left">
          <!-- 机构概述 -->
          <div class="organization common-box">
            <div class="userInfo">
              <h4>机构概述</h4>
              <p>{{ organOverview.organName }}</p>
              <p>地址：&nbsp;{{ organOverview.organAddress }}</p>
              <p>
                负责人：&nbsp;{{ organOverview.principal }}&nbsp;&nbsp;{{
                  organOverview.phone
                }}
              </p>
              <el-button
                type="primary"
                size="medium "
                plain
                @click="dialogVisible = true"
              >查看营业部分布</el-button>
            </div>
            <!-- 代办 -->
            <div class="todo-list">
              <el-row type="flex" justify="space-between">
                <el-col :span="12">
                  <p>分练中心(个)</p>
                  <!-- 起始值 终点值 动画时间 -->
                  <el-button
                    type="text"
                    @click="$router.push('/branches/organization-manage')"
                  >
                    <count-to
                      :start-val="0"
                      :end-val="organOverview.sortingCenterNumber"
                      :duration="1000"
                      style="color: #e35c3f; font-weight: 700; font-size: 22px"
                    />
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <p>营业部(个)</p>
                  <el-button
                    type="text"
                    @click="$router.push('/branches/organization-manage')"
                  >
                    <count-to
                      :start-val="0"
                      :end-val="organOverview.agencyNumber"
                      :duration="1000"
                      style="color: #e35c3f; font-weight: 700; font-size: 22px"
                    />
                  </el-button>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-col :span="12">
                  <p>司机人数(人)</p>
                  <el-button type="text" @click="$router.push('/employee/chauffeur')">
                    <count-to
                      :start-val="0"
                      :end-val="organOverview.driverNumber"
                      :duration="1000"
                      style="color: #e35c3f; font-weight: 700; font-size: 22px"
                    />
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <p>快递员人数(人)</p>
                  <el-button type="text" @click="$router.push('/employee/deliveryman')">
                    <count-to
                      :start-val="0"
                      :end-val="organOverview.courierNumber"
                      :duration="1000"
                      style="color: #e35c3f; font-weight: 700; font-size: 22px"
                    />
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 待办任务 -->
          <div class="todo common-box">
            <el-row type="flex" justify="space-between">
              <h4>
                待办任务
                <el-tooltip class="item" placement="bottom-end" effect="light">
                  <svg-icon icon-class="questionCircle" />
                  <template #content>
                    <p>
                      待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件
                    </p>
                    <p>待派送率=待派送/(待派送+派送中+已签收+拒收)</p>
                    <p>未分配率=未分配/全部数据</p>
                    <p>超时率=超时任务 / (已完成+进行中+已取消)</p>
                  </template>
                </el-tooltip>
              </h4>
              <p>
                <svg-icon icon-class="update" @click="refreshTodoTime" />{{
                  oldTodoTime
                }}
                - {{ todoTime }}
              </p>
            </el-row>
            <div class="echarts">
              <el-row
                type="flex"
                justify="space-around"
                style="height: 120px; width: 100%; margin-right: 20px"
              >
                <el-col :span="5">
                  <div ref="waitingPickupNumber" class="echartsBox" />
                  <el-button
                    type="text"
                    @click="$router.push('/business/order-manage')"
                  >
                    <h4>
                      待取件
                      <!-- 起始值 终点值 动画时间 -->
                      <count-to
                        :start-val="0"
                        :end-val="backlog.waitingPickupNumber"
                        :duration="1000"
                        style="
                          color: #e35c3f;
                          font-weight: 700;
                          font-size: 12px;
                        "
                      />
                    </h4>
                  </el-button>
                </el-col>
                <el-col :span="5">
                  <div ref="waitingDispatchNumber" class="echartsBox" />
                  <el-button
                    type="text"
                    @click="$router.push('/business/order-manage')"
                  >
                    <h4>
                      待派件
                      <count-to
                        :start-val="0"
                        :end-val="backlog.waitingDispatchNumber"
                        :duration="1000"
                        style="
                          color: #e35c3f;
                          font-weight: 700;
                          font-size: 12px;
                        "
                      />
                    </h4>
                  </el-button>
                </el-col>
                <el-col :span="5">
                  <div ref="unassignedTransportTaskNumber" class="echartsBox" />
                  <el-button
                    type="text"
                    @click="$router.push('/transport/transport-task')"
                  >
                    <h4>
                      未分配运输
                      <count-to
                        :start-val="0"
                        :end-val="backlog.unassignedTransportTaskNumber"
                        :duration="1000"
                        style="
                          color: #e35c3f;
                          font-weight: 700;
                          font-size: 12px;
                        "
                      />
                    </h4>
                  </el-button>
                </el-col>
                <el-col :span="5">
                  <div ref="timeoutTransportTaskNumber" class="echartsBox" />
                  <el-button
                    type="text"
                    @click="$router.push('/transport/transport-task')"
                  >
                    <h4>
                      超时运输
                      <count-to
                        :start-val="0"
                        :end-val="backlog.timeoutTransportTaskNumber"
                        :duration="1000"
                        style="
                          color: #e35c3f;
                          font-weight: 700;
                          font-size: 12px;
                        "
                      />
                    </h4>
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="right">
          <!-- 今日数据 -->
          <div class="today common-box">
            <el-row type="flex" justify="space-between">
              <h4>今日数据</h4>
              <p>
                <svg-icon icon-class="update" @click="refreshTodayTime" />
                {{ todayTime }}
              </p>
            </el-row>
            <el-row type="flex" justify="space-around">
              <el-col :span="8">
                <h6>订单金额（元）</h6>
                <count-to
                  :start-val="0"
                  :end-val="todayData.orderAmount"
                  :duration="1000"
                  style="color: #000; font-weight: 700; font-size: 22px"
                />
                <p>
                  较昨日+{{ todayData.orderAmountChanges }}
                  <svg-icon icon-class="上升" />
                </p>
              </el-col>
              <el-col :span="8">
                <h6>订单数量（笔）</h6>
                <count-to
                  :start-val="0"
                  :end-val="todayData.orderNumber"
                  :duration="1000"
                  style="color: #000; font-weight: 700; font-size: 22px"
                />
                <p>
                  较昨日+{{ todayData.orderNumberChanges }}
                  <svg-icon icon-class="上升" />
                </p>
              </el-col>
              <el-col :span="8">
                <h6>运输任务（次）</h6>
                <count-to
                  :start-val="0"
                  :end-val="todayData.transportTaskNumber"
                  :duration="1000"
                  style="color: #000; font-weight: 700; font-size: 22px"
                />
                <p>
                  较昨日+{{ todayData.transportTaskNumberChanges }}
                  <svg-icon icon-class="上升" />
                </p>
              </el-col>
            </el-row>
          </div>
          <!-- 执行中任务 -->
          <div class="doing common-box">
            <el-row type="flex" justify="space-between">
              <h4>
                执行中任务
                <el-tooltip class="item" placement="bottom-end" effect="light">
                  <svg-icon icon-class="questionCircle" />
                  <template #content>
                    <p>
                      运输率=运输中/ (
                      全部订单-待取件-已取件-网点入库-待装车-已取消）
                    </p>
                    <p>派送率=派送中/ ( 待派送+派送中+已签收+拒收）</p>
                  </template>
                </el-tooltip>
              </h4>
              <p>
                <svg-icon icon-class="update" @click="refreshDoingTime" />{{
                  doingTime
                }}
              </p>
            </el-row>
            <div class="echarts">
              <el-row
                type="flex"
                justify="space-around"
                style="height: 120px; width: 100%; margin-right: 20px"
              >
                <el-col :span="8">
                  <div ref="taskInTransitNumber" class="echartsBox" />
                  <el-button
                    type="text"
                    @click="$router.push('/business/order-manage')"
                  >
                    <h4 style="color: #000; font-weight: 700">
                      运输中
                      <!-- 起始值 终点值 动画时间 -->
                      <count-to
                        :start-val="0"
                        :end-val="todayData.taskInTransitNumber"
                        :duration="1000"
                        style="
                          color: #e35c3f;
                          font-weight: 700;
                          font-size: 12px;
                        "
                      />
                    </h4>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <div ref="taskInDeliveryNumber" class="echartsBox" />
                  <el-button
                    type="text"
                    @click="$router.push('/business/order-manage')"
                  >
                    <h4 style="color: #000; font-weight: 700">
                      派送中
                      <!-- 起始值 终点值 动画时间 -->
                      <count-to
                        :start-val="0"
                        :end-val="todayData.taskInDeliveryNumber"
                        :duration="1000"
                        style="
                          color: #e35c3f;
                          font-weight: 700;
                          font-size: 12px;
                        "
                      />
                    </h4>
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="middle">
        <div class="common common-box">
          <h4>常用功能</h4>
          <el-row type="flex" justify="space-around">
            <el-col>
              <a @click="$router.push('/transport/transport-task')">
                <div class="box" @click="$router.push('/')">
                  <svg-icon icon-class="tubiao3" />
                  <h6>快递作业</h6>
                </div>
              </a>
            </el-col>
            <el-col>
              <a @click="$router.push('/transport/transport-task')">
                <div class="box">
                  <svg-icon icon-class="cheliangguanli" />
                  <h6>运输任务</h6>
                </div>
              </a>
            </el-col>
            <el-col>
              <a @click="$router.push('/transport/line-manage')">
                <div class="box">
                  <svg-icon icon-class="probe" />
                  <h6>线路管理</h6>
                </div>
              </a>
            </el-col>
            <el-col>
              <a @click="$router.push('/transit/car-models')">
                <div class="box">
                  <svg-icon icon-class="zhima_daishouhuo" />
                  <h6>车辆管理</h6>
                </div>
              </a>
            </el-col>
            <el-col>
              <a @click="$router.push('/employee/chauffeur')">
                <div class="box">
                  <svg-icon icon-class="sijiguanli" />
                  <h6>司机管理</h6>
                </div>
              </a>
            </el-col>
            <el-col>
              <a @click="$router.push('/transit/freight-manage')">
                <div class="box">
                  <svg-icon icon-class="yunshudingdandingdan" />
                  <h6>运费查询</h6>
                </div>
              </a>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="bottom">
        <!-- 左侧内容 -->
        <div class="left">
          <!-- 线路管理 -->
          <div class="line common-box">
            <h4>线路管理</h4>
            <div class="echarts">
              <LineEcharts />
            </div>
          </div>
          <!-- 订单总量 -->
          <div class="order-form common-box">
            <el-row type="flex" justify="space-between">
              <h4>订单总量</h4>
              <p>{{ fiveMonthsAgo }}--{{ nowMonth }}</p>
            </el-row>
            <p>单位:笔</p>
            <el-row
              type="flex"
              justify="space-around"
              style="text-align: center; padding-top: 10px"
            >
              <el-col :span="8">
                <count-to
                  :start-val="0"
                  :end-val="orderTotal.orderMaxNumber"
                  :duration="1000"
                  style="color: #e35c3f; font-weight: 700; font-size: 22px"
                />

                <p>订单最高值</p>
              </el-col>
              <el-col :span="8">
                <count-to
                  :start-val="0"
                  :end-val="orderTotal.orderAverageNumber"
                  :duration="1000"
                  style="color: #e35c3f; font-weight: 700; font-size: 22px"
                />

                <p>订单平均值</p>
              </el-col>
              <el-col :span="8">
                <count-to
                  :start-val="0"
                  :end-val="orderTotal.orderMinNumber"
                  :duration="1000"
                  style="color: #e35c3f; font-weight: 700; font-size: 22px"
                />

                <p>订单最低值</p>
              </el-col>
            </el-row>
            <div class="echarts">
              <monthlyOrderList :monthly-order-list="monthlyOrderList" />
            </div>
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="right">
          <!-- 运输任务 -->
          <div class="transportation common-box">
            <el-row type="flex" justify="space-between">
              <h4>运输任务</h4>
              <p>
                查看更多
                <svg-icon icon-class="update" />
              </p>
            </el-row>
            <div class="echarts">
              <el-table
                ref="transportTaskList"
                row-key="id"
                :data="transportTaskList"
                stripe
                height="320"
                style="width: 100%"
              >
                <el-table-column prop="id" label="运输编号" />
                <el-table-column prop="startAgency" label="起始地" />
                <el-table-column prop="endAgency" label="目的地" />
                <el-table-column prop="licensePlate" label="车辆" />
                <el-table-column label="任务状态">
                  <template v-slot="{ row }">
                    <span>{{
                      row.status === 1
                        ? "待执行"
                        : row.status === 2
                          ? "进行中"
                          : row.status === 3
                            ? "待确认"
                            : row.status === 4
                              ? "已完成"
                              : row.status === 5
                                ? "已取消"
                                : "--"
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="distribution common-box">
            <!-- 订单分布 -->
            <div class="order-form">
              <el-row type="flex" justify="space-between">
                <h4>订单分布</h4>
                <p>{{ fiveMonthsAgo }}--{{ nowMonth }}</p>
              </el-row>
              <p>单位:笔</p>
              <div class="echarts">
                <transportation />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 营业部分布图 弹窗-->
    <el-dialog :visible.sync="dialogVisible" width="500" top="500">
      <el-image
        fit="contain"
        src="https://slwl-admin.itheima.net/static/img/department_map.7a0c7499.png"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
// import CountTo from 'vue-count-to'

import LineEcharts from './LineEcharts.vue'
import monthlyOrderList from './monthlyOrderList.vue'
import transportation from './transportation.vue'
import CountTo from 'vue-count-to'

import { getWorkspaceList } from '@/api/dashboard'
import { formatDate, formatDateYM } from '@/utils'
// 1、引入echarts图表库
import * as echarts from 'echarts'
// 2、引入水球图的依赖文件
import 'echarts-liquidfill/dist/echarts-liquidfill.min.js'

// 获取两天前的时间
const today = new Date()
// 设定两天前的日期
today.setDate(today.getDate() - 2)
const oldTodoTime = formatDate(today)
// 获取五个月前的月份
const nowMonth = new Date()
nowMonth.setMonth(today.getMonth() - 5)
const fiveMonthsAgo = formatDateYM(nowMonth)
export default {
  name: 'Dashboard',
  components: {
    monthlyOrderList,
    CountTo,
    LineEcharts,
    transportation
  },
  data() {
    return {
      organOverview: {}, // 机构概述
      todayData: {}, // 今日数据
      todayTime: formatDate(today), // 今日数据更新时间
      backlog: {}, // 待办业务数据
      todoTime: formatDate(today), // 待办业务刷新时间
      oldTodoTime: oldTodoTime, // 待办业务对当前时间两天前
      nowMonth: formatDateYM(new Date()), // 当前月份
      fiveMonthsAgo: fiveMonthsAgo, // 当前月份的五个月前
      doingTime: formatDate(today), // 今日数据更新时间
      dialogVisible: false, // 营业部分布图状态
      transportTaskList: [], // 运输任务数据
      monthlyOrderList: [], // 订单月度数据
      orderTotal: {} // 订单总量
    }
  },
  watch: {
    backlog() {
      // 待取件水球图
      this.waitingPickupNumber.setOption({
        series: [
          {
            type: 'liquidFill',
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#f9785c',
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              borderWidth: 3,
              borderColor: '#fff',
              color: '#ffe5e0'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#e35c3f',
              shadowBlur: 0,
              opacity: 0.7
            },
            data: ['0.' + this.backlog.waitingPickupNumber],
            label: {
              show: true,
              formatter: this.backlog.waitingPickupNumber + '%',
              fontSize: 12,
              color: '#000'
            },
            animationDuration: 1000
          }
        ]
      })
      // 待派送水球图
      this.waitingDispatchNumber.setOption({
        series: [
          {
            type: 'liquidFill',
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#f9785c',
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              borderWidth: 3,
              borderColor: '#fff',
              color: '#fff1d9'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#ffc45e',
              shadowBlur: 0,
              opacity: 0.7
            },
            data: ['0.' + this.backlog.waitingDispatchRate],
            label: {
              show: true,
              formatter: this.backlog.waitingDispatchRate + '%',
              fontSize: 12,
              color: '#000'
            },
            animationDuration: 1000
          }
        ]
      })
      // 未分配运输水球图
      this.unassignedTransportTaskNumber.setOption({
        series: [
          {
            type: 'liquidFill',
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#f9785c',
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              borderWidth: 3,
              borderColor: '#fff',
              color: '#ffead7'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#ff9b41',
              shadowBlur: 0,
              opacity: 0.7
            },
            data: ['0.' + this.backlog.unassignedTransportTaskRate],
            label: {
              show: true,
              formatter: this.backlog.unassignedTransportTaskRate + '%',
              fontSize: 12,
              color: '#000'
            },
            animationDuration: 1000
          }
        ]
      })
      // 超市运输水球图
      this.timeoutTransportTaskNumber.setOption({
        series: [
          {
            type: 'liquidFill',
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#f9785c',
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              borderWidth: 3,
              borderColor: '#fff',
              color: '#fafade'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#eddd83',
              shadowBlur: 0,
              opacity: 0.7
            },
            data: ['0.' + this.backlog.timeoutTransportTaskRate],
            label: {
              show: true,
              formatter: this.backlog.timeoutTransportTaskRate + '%',
              fontSize: 12,
              color: '#000'
            },
            animationDuration: 1000
          }
        ]
      })
      // 运输中水球图
      this.taskInTransitNumber.setOption({
        series: [
          {
            type: 'liquidFill',
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#f9785c',
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              borderWidth: 3,
              borderColor: '#fff',
              color: '#ffe5e0'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#f9785c',
              shadowBlur: 0,
              opacity: 0.7
            },
            data: ['0.' + this.todayData.taskInTransitRate],
            label: {
              show: true,
              formatter: this.todayData.taskInTransitRate + '%',
              fontSize: 12,
              color: '#000'
            },
            animationDuration: 1000
          }
        ]
      })
      // 派送中水球图
      this.taskInDeliveryNumber.setOption({
        series: [
          {
            type: 'liquidFill',
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#f9785c',
                shadowBlur: 0
              }
            },
            backgroundStyle: {
              borderWidth: 3,
              borderColor: '#fff',
              color: '#fff1d9'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#ffc45e',
              shadowBlur: 0,
              opacity: 0.7
            },
            data: ['0.' + this.todayData.taskInDeliveryRate],
            label: {
              show: true,
              formatter: this.todayData.taskInDeliveryRate + '%',
              fontSize: 12,
              color: '#000'
            },
            animationDuration: 1000
          }
        ]
      })
    }
  },
  created() {
    // 获取工作台总信息
    this.getWorkspaceList()
  },
  mounted() {
    // 待办事项水球图
    this.waitingPickupNumber = echarts.init(this.$refs.waitingPickupNumber)
    this.timeoutTransportTaskNumber = echarts.init(
      this.$refs.timeoutTransportTaskNumber
    )
    this.unassignedTransportTaskNumber = echarts.init(
      this.$refs.unassignedTransportTaskNumber
    )
    this.waitingDispatchNumber = echarts.init(this.$refs.waitingDispatchNumber)
    // 执行中任务数据
    this.taskInTransitNumber = echarts.init(this.$refs.taskInTransitNumber)
    this.taskInDeliveryNumber = echarts.init(this.$refs.taskInDeliveryNumber)

    // 运输任务表格按秒自动滚动
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.transportTaskList
    // console.log(table)
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // console.log(divData)
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 重置table距离顶部距离
      divData.scrollTop += 20

      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      // console.log(divData.clientHeight)
      // console.log(divData.scrollTop)
      // console.log(divData.scrollHeight)
      if (
        divData.clientHeight + divData.scrollTop >= divData.scrollHeight &&
        divData.clientHeight - divData.scrollHeight < 20
      ) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
        // console.log(divData.scrollTop)
        return
      }
    }, 1000) // 滚动速度
  },
  methods: {
    // 获取工作台总信息
    async getWorkspaceList() {
      const { data } = await getWorkspaceList()
      // console.log(data)
      this.organOverview = data.organOverview
      // console.log(this.organOverview)
      this.todayData = data.todayData
      this.backlog = data.backlog
      // console.log(this.backlog)
      this.transportTaskList = data.transportTaskList
      this.orderTotal = data.orderLineChart
      this.monthlyOrderList = data.orderLineChart.monthlyOrderList
      // console.log(this.monthlyOrderList)
    },
    // 点击刷新今日数据时间按钮
    refreshTodayTime() {
      // console.log('刷新时间和列表数据')
      this.todayTime = formatDate(new Date())
      this.getWorkspaceList()
    },
    // 点击刷新代办任务时间按钮
    refreshTodoTime() {
      const today = new Date()
      this.todoTime = formatDate(today)
      // 设定两天前的日期
      today.setDate(today.getDate() - 2)
      this.oldTodoTime = formatDate(today)
      this.getWorkspaceList()
    },
    // 点击刷新执行中任务数据
    refreshDoingTime() {
      this.doingTime = formatDate(new Date())
      this.getWorkspaceList()
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  background: #f5f6f8;
  position: relative;
  .container {
    //版心尺寸
    //width: 1700px;
    margin: 0 auto;
    padding: 10px;
  }
  .common-box {
    background-color: #fff;
    padding: 20px;
    margin: 10px;
  }
  * {
    white-space: nowrap;
    font-size: 12px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 10px 0;
  }
  .echarts {
    width: 100%;
    height: 100%;
    text-align: center;
    .echartsBox {
      // width: 100%;
      height: 100%;
      // border: 1px solid blue;
      // background-color: pink;
    }
  }
  .top {
    display: flex;
    .left {
      width: 55%;
      .organization {
        display: flex;
        height: 200px;
        font-size: 12px;
        .userInfo {
          width: 60%;
        }
        .todo-list {
          padding: 10px;
          text-align: center;
        }
      }
      .todo {
        height: 220px;
        h4 {
          color: #000;
          font-weight: 700;
        }
      }
    }
    .right {
      flex: 1;
      .today {
        height: 200px;
        text-align: center;
        h4 {
          height: 12px;
        }
      }
      .doing {
        height: 220px;
      }
    }
  }
  .middle {
    .common {
      height: 150px;
      padding: 10px;
      // background-color: pink;
      .box {
        background-color: #fafafb;
        margin: 0 10px 10px;
        text-align: center;
        padding: 5px 0;
        border-radius: 5px;
        .svg-icon {
          font-size: 40px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    .left {
      width: 50%;
      .line {
        height: 400px;
      }
      .order-form {
        height: 500px;
        .echarts {
          height: 400px;
        }
      }
    }
    .right {
      width: 50%;
      .transportation {
        height: 400px;
      }
      .distribution {
        height: 500px;
        .echarts {
          height: 400px;
        }
      }
    }
    .el-dialog {
      position: absolute;
      transform: translate(-50% -50%);
      padding: 0;
      .el-image {
        margin: 0;
      }
    }

    // .el-dialog__wrapper::before {
    //   content: "";
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 100%;
    //   background: url("https://slwl-admin.itheima.net/static/img/department_map.7a0c7499.png")
    //     no-repeat center center / cover;
    // }
  }
}
</style>
